﻿/*#region Form Sliders*/
/*#region noUiSlider*/
.noUi-target,
.noUi-target {
    -webkit-touch-callout: none;
    -ms-touch-action: none;
    touch-action: none;
    .user-select(none);
    .box-sizing(border-box);
}

.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    .border-radius(2px);
}

.noUi-stacking .noUi-handle {
    /* This class is applied to the lower origin when
   its values is > 50%. */
    z-index: 10;
}

.noUi-stacking + .noUi-origin {
    /* Fix stacking order in IE7, which incorrectly
   creates a new context for the origins. */
    *z-index: -1;
}

.noUi-state-tap .noUi-origin {
    .transition(left 0.3s, top 0.3s);
}

.noUi-state-drag {
    cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 18px;


    &.slider-xs {
        height: 14px;

        .noUi-handle {
            height: 24px;
            width: 26px;

            &:before {
                left: 10px;
                top: 4px;
            }

            &:after {
                left: 13px;
                top: 4px;
            }
        }
    }

    &.slider-sm {
        height: 16px;

        .noUi-handle {
            height: 26px;
            width: 30px;

            &:before {
                left: 12px;
                top: 5px;
            }

            &:after {
                left: 15px;
                top: 5px;
            }
        }
    }

    &.slider-lg {
        height: 20px;

        .noUi-handle {
            height: 30px;
            width: 36px;

            &:before {
                left: 15px;
                top: 7px;
            }

            &:after {
                left: 18px;
                top: 7px;
            }
        }
    }

    &.slider-xl {
        height: 22px;

        .noUi-handle {
            height: 32px;
            width: 38px;

            &:before {
                left: 16px;
                top: 8px;
            }

            &:after {
                left: 19px;
                top: 8px;
            }
        }
    }
}

    .noUi-horizontal .noUi-handle {
        width: 34px;
        height: 28px;
        left: -17px;
        top: -6px;
    }

    .noUi-horizontal.noUi-extended {
        padding: 0 15px;
    }

        .noUi-horizontal.noUi-extended .noUi-origin {
            right: -15px;
        }

.noUi-vertical {
    width: 18px;

    &.slider-xs {
        width: 14px;

        .noUi-handle {
            width: 24px;
            height: 26px;

            &:before {
                top: 10px;
                left: 4px;
            }

            &:after {
                top: 13px;
                left: 4px;
            }
        }
    }

    &.slider-sm {
        width: 16px;

        .noUi-handle {
            width: 26px;
            height: 30px;

            &:before {
                top: 12px;
                left: 5px;
            }

            &:after {
                top: 15px;
                left: 5px;
            }
        }
    }

    &.slider-lg {
        width: 20px;

        .noUi-handle {
            width: 30px;
            height: 36px;

            &:before {
                top: 15px;
                left: 7px;
            }

            &:after {
                top: 18px;
                left: 7px;
            }
        }
    }

    &.slider-xl {
        width: 22px;

        .noUi-handle {
            width: 32px;
            height: 38px;

            &:before {
                top: 16px;
                left: 8px;
            }

            &:after {
                top: 19px;
                left: 8px;
            }
        }
    }
}

    .noUi-vertical .noUi-handle {
        width: 28px;
        height: 34px;
        left: -6px;
        top: -17px;
    }

    .noUi-vertical.noUi-extended {
        padding: 15px 0;
    }

        .noUi-vertical.noUi-extended .noUi-origin {
            bottom: -15px;
        }
/* Styling;
 */
.noUi-background {
    background: #FAFAFA;
}

.noUi-connect {
    background: @themeprimary;
    .transition(background 450ms);
}

.noUi-target {
    border-radius: 4px;
    border: 1px solid #D3D3D3;
}

    .noUi-target.noUi-connect {
    }
/* Handles and cursors;
 */
.noUi-dragable {
    cursor: w-resize;
}

.noUi-vertical .noUi-dragable {
    cursor: n-resize;
}

.noUi-handle {
    position: relative;
    z-index: 1;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    .box-shadow(inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB);
}

.noUi-active {
    .box-shadow(inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB);
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 14px;
    top: 6px;
}

.noUi-handle:after {
    left: 17px;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
    width: 14px;
    height: 1px;
    left: 6px;
    top: 14px;
}

.noUi-vertical .noUi-handle:after {
    top: 17px;
}
/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled] .noUi-handle {
    cursor: not-allowed;
}
/* Blocked state;
 */
.noUi-state-blocked.noUi-connect,
.noUi-state-blocked .noUi-connect {
    background: #4FDACF;
}
/*#endregion noUiSlider*/
/*#region jQRangeSlider*/
.ui-rangeSlider {
    height: 30px;
    padding-top: 40px;

    &.slider-sm {
        .ui-rangeSlider-container,
        .ui-rangeSlider-arrow {
            height: 20px;
        }

        .ui-rangeSlider-bar {
            height: 18px;
        }
    }

    &.slider-xs {
        .ui-rangeSlider-container,
        .ui-rangeSlider-arrow {
            height: 10px;
        }

        .ui-rangeSlider-bar {
            height: 8px;
        }

        .ui-rangeSlider-arrow-inner:before {
            font-size: 10px;
            line-height: 22px;
        }
    }

    &.valuelabel-blue {
        .ui-rangeSlider-label {
            background-color: @blue;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @blue;
        }
    }

    &.valuelabel-primary {
        .ui-rangeSlider-label {
            background-color: @primary;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @primary;
        }
    }

    &.valuelabel-danger {
        .ui-rangeSlider-label {
            background-color: @danger;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @danger;
        }
    }

    &.valuelabel-success {
        .ui-rangeSlider-label {
            background-color: @success;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @success;
        }
    }

    &.valuelabel-warning {
        .ui-rangeSlider-label {
            background-color: @warning;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @warning;
        }
    }

    &.valuelabel-silver {
        .ui-rangeSlider-label {
            background-color: @silver;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @silver;
        }
    }

    &.valuelabel-blueberry {
        .ui-rangeSlider-label {
            background-color: @blueberry;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @blueberry;
        }
    }

    &.valuelabel-palegreen {
        .ui-rangeSlider-label {
            background-color: @palegreen;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @palegreen;
        }
    }

    &.valuelabel-orange {
        .ui-rangeSlider-label {
            background-color: @orange;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @orange;
        }
    }

    &.valuelabel-darkorange {
        .ui-rangeSlider-label {
            background-color: @darkorange;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @darkorange;
        }
    }

    &.valuelabel-magenta {
        .ui-rangeSlider-label {
            background-color: @magenta;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @magenta;
        }
    }

    &.valuelabel-purple {
        .ui-rangeSlider-label {
            background-color: @purple;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @purple;
        }
    }

    &.valuelabel-maroon {
        .ui-rangeSlider-label {
            background-color: @maroon;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @maroon;
        }
    }

    &.valuelabel-yellow {
        .ui-rangeSlider-label {
            background-color: @yellow;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @yellow;
        }
    }

    &.valuelabel-success {
        .ui-rangeSlider-label {
            background-color: @success;
        }

        .ui-rangeSlider-label-inner {
            border-top: 6px solid @success;
        }
    }


    &.silder-blue {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @blue !important;
        }

        .ui-rangeSlider-bar {
            background: @blue !important;
        }
    }

    &.silder-primary {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @primary !important;
        }

        .ui-rangeSlider-bar {
            background: @primary !important;
        }
    }

    &.silder-danger {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @danger !important;
        }

        .ui-rangeSlider-bar {
            background: @danger !important;
        }
    }

    &.silder-warning {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @warning !important;
        }

        .ui-rangeSlider-bar {
            background: @warning !important;
        }
    }

    &.silder-silver {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @silver !important;
        }

        .ui-rangeSlider-bar {
            background: @silver !important;
        }
    }

    &.silder-blueberry {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @blueberry !important;
        }

        .ui-rangeSlider-bar {
            background: @blueberry !important;
        }
    }

    &.silder-palegreen {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @palegreen !important;
        }

        .ui-rangeSlider-bar {
            background: @palegreen !important;
        }
    }

    &.silder-success {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @success !important;
        }

        .ui-rangeSlider-bar {
            background: @success !important;
        }
    }

    &.silder-yellow {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @yellow !important;
        }

        .ui-rangeSlider-bar {
            background: @yellow !important;
        }
    }


    &.silder-orange {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @orange !important;
        }

        .ui-rangeSlider-bar {
            background: @orange !important;
        }
    }

    &.silder-darkorange {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @darkorange !important;
        }

        .ui-rangeSlider-bar {
            background: @darkorange !important;
        }
    }

    &.silder-magenta {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @magenta !important;
        }

        .ui-rangeSlider-bar {
            background: @magenta !important;
        }
    }

    &.silder-purple {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @purple !important;
        }

        .ui-rangeSlider-bar {
            background: @purple !important;
        }
    }

    &.silder-maroon {
        .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
        .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
            color: @maroon !important;
        }

        .ui-rangeSlider-bar {
            background: @maroon !important;
        }
    }
}

.ui-rangeSlider,
.ui-rangeSlider-container,
.ui-rangeSlider-arrow {
    .box-sizing(content-box);
}

.ui-rangeSlider-withArrows .ui-rangeSlider-container {
    margin: 0 15px;
}

.ui-rangeSlider-noArrow .ui-rangeSlider-container {
    .border-radius(2px);
    border-left: solid 1px #D3D3D3;
    border-right: solid 1px #D3D3D3;
}

.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container {
    border-color: #8490a3;
}

.ui-rangeSlider-container,
.ui-rangeSlider-arrow {
    height: 30px;
    border-top: solid 1px #D3D3D3;
    border-bottom: solid 1px #D3D3D3;
    background: @white;
}

.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow {
}

.ui-rangeSlider-label {
    background-color: @themesecondary;
    .border-radius(3px);
    padding: 5px 10px;
    bottom: 36px;
    color: @white;
    font-size: 13px;
    cursor: col-resize;
}

.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow,
.ui-rangeSlider-disabled .ui-rangeSlider-label {
    .opacity(.4);
}

.ui-rangeSlider-arrow {
    width: 14px;
    cursor: pointer;
}

.ui-rangeSlider-leftArrow {
    .border-radius(2px 0 0 2px);
    border-left: solid 1px #D3D3D3;
}

.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow {
}

.ui-rangeSlider-rightArrow {
    .border-radius(0 2px 2px 0);
    border-right: solid 1px #D3D3D3;
}

.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow {
}

.ui-rangeSlider-arrow-inner {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -10px;

    &:before {
        position: absolute;
        top: 0;
        font-family: FontAwesome;
        font-weight: normal;
        font-size: 14px;
        line-height: 23px;
        border-width: 1px;
        content: "";
        color: #d3d3d3;
    }
}

.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner:before {
    content: "\f053";
    left: 8px;
    margin-left: -5px;
}

.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
    color: @palegreen;
}

.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner:before {
    content: "\f054";
    right: 0;
    margin-right: -11px;
}

.ui-rangeSlider-innerBar {
    width: 110%;
    height: 100%;
    left: -10px;
    overflow: hidden;
}

.ui-rangeSlider-bar {
    background: @themeprimary;
    height: 28px;
    margin: 1px;
    .border-radius(2px);
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
}

.ui-rangeSlider-disabled .ui-rangeSlider-bar {
    .opacity(.4);
}

.ui-rangeSlider-handle {
    width: 10px;
    height: 30px;
    background: transparent;
    cursor: col-resize;
}

.ui-rangeSlider-label-inner {
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    z-index: 99;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-left: -6px;
    border-top: 6px solid @themesecondary;
}

.ui-rangeSlider-disabled .ui-rangeSlider-label-inner {
    .opacity(.4);
}

.ui-editRangeSlider-inputValue {
    width: 2em;
    text-align: center;
    font-size: 13px;
    border: 1px solid transparent !important;
    margin-left: -5px;
    margin-right: -5px;
}

.ui-rangeSlider .ui-ruler-scale {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.ui-rangeSlider .ui-ruler-tick {
    float: left;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner {
    color: #d3d3d3;
    margin-top: 1px;
    border-left: 1px solid #d3d3d3;
    height: 30px;
    padding-left: 2px;
    position: relative;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label {
    position: absolute;
    bottom: 6px;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-label {
    color: @snow;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner {
    border-left: 1px solid #d3d3d3;
    margin-top: 25px;
    height: 5px;
}
/*#endregion jQRangeSlider*/
/*#endregion Form Sliders*/